<template>
    <div style="width: 100%; height: 100%">
        <MainHeader class="slogan-header" ></MainHeader>
        <div class="main-container-content contentBoxs not">
            <el-row :gutter="10">
                <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                    <Commontitle title="教学库管理" dec=""></Commontitle>
                </el-col>
            </el-row>
            <div class="contentBoxs-cobtainers" :class="device === 'mobile' ? 'active' : ''">
                <div class="rowContaines">
                    <el-row :gutter="10">
                        <el-col :xs='24' :sm="24" :md="24" :lg="24" :xl="24">
                            <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small"
                                :inline="true" label-width="100px">
                                <el-form-item label="教学库编号：" prop="teachingLibrariesNumber">
                                    <el-input v-model="queryParams.teachingLibrariesNumber" placeholder="请输入编号"
                                        clearable style="width:160px" @keyup.enter.native="handleQuery"
                                        @change="handleQuery" />
                                </el-form-item>
                                <el-form-item label="教学库名称：" prop="teachingLibrariesName">
                                    <el-input v-model="queryParams.teachingLibrariesName" placeholder="请输入名称" clearable
                                        style="width:160px" @keyup.enter.native="handleQuery" @change="handleQuery" />
                                </el-form-item>
                                <el-form-item label="管理教师：" prop="usersId">
                                    <el-select v-model="queryParams.usersId" placeholder="选择管理教师" clearable filterable
                                        style="width: 160px" @change="handleQuery">
                                        <el-option v-for="item in usersIdsList" :key="item.scanId"
                                            :label="item.scanName" :value="item.scanId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <el-date-picker v-model="queryParams.createTime" type="datetime"
                                        placeholder="请选择创建时间" style="width: 160px">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="结束时间">
                                    <el-date-picker v-model="queryParams.teachingLibrariesEndTime" type="datetime"
                                        placeholder="请选择结束时间" style="width: 160px">
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item label="状态：" prop="status" clearable>
                                    <el-select v-model="queryParams.status" placeholder="选择状态" clearable filterable
                                        style="width: 160px" @change="handleQuery">
                                        <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search" size="mini"
                                        @click="handleQuery">搜索</el-button>
                                    <el-button type="warning" icon="el-icon-plus" size="mini"
                                        @click="addUserEvent">新增</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <div class="lists_containers" ref="tableElement">
                        <el-table :data="tableData" style="width: 100%" border class="tablesContainers" ref="table"
                            :height="tableHeight">
                            <el-table-column prop="id" label="序号" width="50" fixed align="center">
                            </el-table-column>
                            <el-table-column fixed label="操作" :width="device == 'mobile' ? 120 : 120" align="center">
                                <template slot-scope="scope">
                                    <el-button type="text" size="mini"
                                        @click="addIndividualCase(scope.row)">病例切片集</el-button>

                                    <el-button type="text" size="mini">详情</el-button>
                                    <el-button type="text" size="mini"
                                        @click="addSliceStorageDailog(scope.row)">导入病例切片</el-button>
                                </template>
                            </el-table-column>


                            <el-table-column prop="teachingLibrariesNumber" label="教学库编号" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="teachingLibrariesName" label="教学库名称" width="120" align="center">

                            </el-table-column>
                            <el-table-column prop="userName" label="管理老师" width="120" align="center">
                                <template slot-scope="scope">
                                    <span>{{ getUserName(scope.row.users) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="phonenumber" label="使用学生" align="center">
                            </el-table-column>

                            <el-table-column prop="status" label="状态" width="80" align="center">

                            </el-table-column>
                            <el-table-column prop="status" label="浏览审核" width="100" align="center">

                            </el-table-column>
                            <el-table-column prop="createTime" label="创建时间" width="160" align="center">

                            </el-table-column>
                            <el-table-column prop="teachingLibrariesEndTime" label="结束时间" width="160" align="center">

                            </el-table-column>

                        </el-table>
                    </div>
                </div>
                <div class="paginationDiv" :class="device === 'mobile' ? 'active' : ''">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="scienceManagerTable.page" :page-sizes="[10, 20, 30, 40, 50, 100]"
                        :page-size="10" layout="sizes, prev, pager, next,total" :total="scienceManagerTable.total">
                    </el-pagination>
                </div>
            </div>

        </div>

        <!-- 新增教学库 -->
        <div class="registerDailog" v-if="addTeachDailog">
            <addTeach @close="closedDailog"></addTeach>
        </div>
        <!-- 新增个案 -->
        <div class="registerDailog" v-if="individualCasesDailog">
            <!-- <individualCases @close="closedDailog" :individualCasesId="individualCasesId"></individualCases> -->
            <sliceSet @close="closedDailog" :individualCasesId="individualCasesId" :teachInfo="teachInfo"></sliceSet>
        </div>

        <!-- 切片入库 -->
        <div class="registerDailog" v-if="sliceStorageDailog">
            <sliceStorage @close="closedDailog" :individualCasesId="individualCasesId" :teachInfo="teachInfo">
            </sliceStorage>
        </div>

        <!-- <MainFooter :showFixed="true" backgroundColor="rgba(58, 98, 215, 0)" /> -->
    </div>
</template>

<script>
import addTeach from '@/templates/components/pathLearn/addTeach.vue'
// import individualCases from '@/templates/components/pathLearn/individualCases'
import sliceSet from '@/templates/components/pathLearn/sliceSet.vue'
import sliceStorage from '@/templates/components/pathLearn/sliceStorage.vue'
export default {
    name: 'teachManageList',
    components: {
        addTeach,
        sliceSet,
        sliceStorage
        // individualCases
    },
    data() {
        return {
            tableHeight: null,
            sliceStorageDailog: false,
            individualCasesDailog: false,
            individualCasesId: '',
            addTeachDailog: false,
            usersIdsList: [],//教学教师
            // 查询参数
            queryParams: {
                page: 0,
                size: 10,
                createTime: '', //创建开始时间
                teachingLibrariesEndTime: '', //创建结束时间
                teachingLibrariesName: '', //科研库名称
                teachingLibrariesNumber: '', //科研库编号
                usersId: '', //科研库负责人Id
                status: undefined,
                usersIds: []

            },

            // 日期范围
            tableData: [

            ],
            teachInfo: {},
            scienceManagerTable: {
                page: 1,
                size: 10,
                total: 0,
            },
            sysUseTypeArr: [
                { label: '正常', value: '0' },
                { label: '停用', value: '1' }
            ],

        };
    },
    mounted() {
        const { state } = this.$store;
        this.getUsers();

    },
    computed: {
        device() {
            return this.$store.state.device
        }
    },
    updated() {
        this.$nextTick(() => {
            const element = this.$refs.tableElement;
            console.log(element)
            if (element) {
                const rect = element.getBoundingClientRect();
                if (rect && rect.top) {
                    const top = rect.top + 100 + 'px'
                    // console.log("tabl 高度---------------")
                    // console.log(top)
                    this.tableHeight = `calc(100vh - ${top})`
                } else {
                    this.tableHeight = `400px`
                }
            } else {
                this.tableHeight = `400px`
            }
            this.$refs.table.doLayout()
        })
    },
    methods: {
        checkPermission(row) { //判断是否有权限
            const { state } = this.$store;
            let userPermission = null;
            if (row.users === null) {
                if (state.user.id == 1) {
                    return true;
                }
            } else {
                console.log("user______________")
                console.log(state.user.id)
                console.log(row.users)
                return true;
                // return (userPermission = row.users.some((item) => {  // 本人导入的切片才可操作
                //     return item.id == state.user.id || state.user.id == 1;
                // }));
            }
        },
        getUserName(data) {
            let usersName = '';
            if (data) {
                data.forEach((item) => {
                    if (item.name == null) {
                    } else {
                        usersName = usersName + item.name + ' ';
                    }
                });
            }
            return usersName;
        },
        getUsers() {
            this.$axios({
                method: 'GET',
                url: '/users/searchUserIdAndName/forBiopsyResearchLibraries',
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.usersIdsList = res.data.data;
                    this.getTeachingManagerTableData();
                }
            });
        },
        getTeachingManagerTableData() {

            this.$axios({
                method: 'POST',
                url: '/TeachingLibraries/findAll',
                data: this.queryParams,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let returnData = res.data
                    this.tableData = returnData.data;
                    this.scienceManagerTable.total = returnData.pageInfo.total

                }
            });
        },
        handleSizeChange(val) {

            this.queryParams.size = val;
            this.scienceManagerTable.size = val
            console.log(`每页 ${val} 条`);
            this.handleQuery()
        },
        handleCurrentChange(val) {
            this.scienceManagerTable.page = val;
            this.queryParams.size = val - 1
            console.log(`当前页: ${val}`);
            this.handleQuery()
        },
        handleQuery() {
            console.log("请求列表接口！")
            this.getTeachingManagerTableData();
        },
        addIndividualCase(row) {
            const userPermission = this.checkPermission(row);
            let id = row.id
            if (userPermission) {
                this.individualCasesId = id
                this.teachInfo = row
                this.individualCasesDailog = true
                this.stopScroll()
            } else {
                this.$message.info('您没有权限操作此条记录');
            }

        },
        // show
        addSliceStorageDailog(row) {
            const userPermission = this.checkPermission(row);
            let id = row.id
            if (userPermission) {
                this.individualCasesId = id
                this.teachInfo = row
                this.sliceStorageDailog = true
                this.stopScroll()
            } else {
                this.$message.info('您没有权限操作此条记录');
            }
        },
        addUserEvent() {
            this.addTeachDailog = true
            this.stopScroll()
        },
        closedDailog() {
            this.individualCasesDailog = false
            this.addTeachDailog = false
            this.sliceStorageDailog = false
            this.canScroll()
        }
    },
};
</script>

<style scoped lang="scss">

</style>
